<template>
    <view class="statistics-box">
        <view class="statistics-title">
            <view class="title-cl"></view>
            <view class="title-cltext">
                店铺中差评统计
                <text class="cltext">（近90天）</text>
            </view>
        </view>
        <view class="wxcharts">
            <canvas v-if="bol" canvas-id="ringCanvas" style="height: 230px; width: 230px" class="canvas" @touchstart="touchHandler"></canvas>
            <view class="wxcharts-default" v-else>
                <view class="wxcharts-big"></view>
                <view class="wxcharts-small"></view>
            </view>
            <view class="data_info">
                <view class="data_item">
                    <view class="yesterday"></view>
                    <text v-if="ringChart.series[0].data">五星：{{ ringChart.series[0].data }}</text>
                    <text v-else>五星：0</text>
                </view>
                <view class="data_item">
                    <view class="month"></view>
                    <text v-if="ringChart.series[1].data">四星：{{ ringChart.series[1].data }}</text>
                    <text v-else>四星：0</text>
                </view>
                <view class="data_item">
                    <view class="all"></view>
                    <text v-if="ringChart.series[2].data">三星：{{ ringChart.series[2].data }}</text>
                    <text v-else>三星：0</text>
                </view>
                <view class="data_item">
                    <view class="all2"></view>
                    <text v-if="ringChart.series[3].data">二星：{{ ringChart.series[3].data }}</text>
                    <text v-else>二星：0</text>
                </view>
                <view class="data_item">
                    <view class="all3"></view>
                    <text v-if="ringChart.series[4].data">一星：{{ ringChart.series[4].data }}</text>
                    <text v-else>一星：0</text>
                </view>
            </view>
        </view>
        <!-- 商品好评榜单 -->
        <view class="ReviewsList">
            <!-- 商品好评榜单 头部 -->
            <view class="statistics-title">
                <view class="title-cl"></view>
                <view class="title-cltext">
                    商品好评榜单
                    <text class="cltext">（近90天）</text>
                </view>
            </view>
            <!-- 商品好评榜单 主题部分 -->
            <view class="statistics-text" :data-index="index" v-for="(item, index) in reviewsList" :key="index">
                <view class="statistics-lt" :style="'background:rgba' + rgbas[index] + ';'">
                    <text class="statistics-texts" :style="'color: ' + colors[index] + ';'">0{{ index + 1 }}{{ item.orderName }}</text>
                </view>

                <progress class="con-pro" active :activeColor="colors[index]" border-radius="15" stroke-width="22" :percent="(item.num / total) * 100" backgroundColor="#fff" />

                <text class="statistics-nums" :style="'left:' + ((item.num / total) * 100 < 50 ? (item.num / total) * 100 + 20 : (item.num / total) * 100) + '\%'">
                    {{ item.num }}
                </text>
            </view>
        </view>
        <!-- 美发师中差评统计 -->
        <view class="negative-comment">
            <view class="statistics-title">
                <view class="title-cl"></view>
                <view class="title-cltext">
                    美发师中差评统计
                    <text class="cltext">（近90天）</text>
                </view>
            </view>
            <view class="starbox">
                <view class="flexs align-center padding-lr-xs">
                    <view class="padding-lr" @tap="queryListByType" data-index="1">
                        <view :class="'margin-bottom-xs ' + (active == 1 ? 'text-xl text-bold' : 'text-df')">一星25</view>
                    </view>
                    <view class="padding-lr" @tap="queryListByType" data-index="2">
                        <view :class="'margin-bottom-xs ' + (active == 2 ? 'text-xl text-bold' : 'text-df')">二星2145</view>
                    </view>
                    <view class="padding-lr" @tap="queryListByType" data-index="3">
                        <view :class="'margin-bottom-xs ' + (active == 3 ? 'text-xl text-bold' : 'text-df')">三星2145</view>
                    </view>
                </view>
                <view class="starbox-rl">
                    <view class="have-contentbox" :data-index="index" @tap="havecoterFun" v-for="(item, index) in havecoter" :key="index">
                        <image class="pay_icon_6" v-if="item.index == indexs" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png"></image>

                        <view v-else class="pay_icon_6text1"></view>

                        <view :class="' ' + (item.index == indexs ? 'pay_icon_6text' : 'pay_icon_6text2') + ' '">{{ item.name }}</view>
                    </view>
                </view>
            </view>
            <View class="bg-ghostGrayS">
                <view class="craftsmen-dif" v-for="(item, index) in statisticsComments" :key="index">
                    <view class="craftsmen-iconbox">
                        <image class="craftsmen-icon" @tap="hearname" :data-item="item" :src="item.path"></image>
                        <view class="alternative-box">
                            <view class="alternative">接单数</view>
                            <view class="alternative-munber">{{ item.num }}</view>
                        </view>
                    </view>
                </view>
            </View>
        </view>
    </view>
</template>

<script>
// pages/evaluationstatistics/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js');

var wxCharts = require('../../utils/wxchart');

var ringChart = null;
export default {
    data() {
        return {
            active: 1,
            indexs: 0,

            ringChart: {
                animation: true,
                canvasId: 'ringCanvas',
                type: 'ring',
                subtitle: {
                    name: '暂无数据',
                    background: '#fff'
                },
                extra: {
                    ringWidth: 35,
                    pie: {
                        offsetAngle: -45
                    }
                },
                series: [
                    {
                        name: '五星',
                        data: 1,
                        stroke: false,
                        color: '#E94A18'
                    },
                    {
                        name: '四星',
                        data: 0,
                        stroke: false,
                        color: '#F8B551'
                    },
                    {
                        name: '三星',
                        data: 0,
                        stroke: false,
                        color: '#7ECEF4'
                    },
                    {
                        name: '二星',
                        data: 0,
                        stroke: false,
                        color: '#AA89BD'
                    },
                    {
                        name: '一星',
                        data: 0,
                        stroke: false,
                        color: '#B3D465'
                    }
                ],
                disablePieStroke: true,
                width: 230,
                height: 230,
                dataLabel: false,
                legend: false,
                background: '#f5f5f5',
                padding: 0
            },

            bol: false,
            todayAmount: '',
            picker_01_data: '全部',
            isShow_01: false,
            showselector: false,
            date: '',
            dates: '20221101',
            showtime: false,
            indexs: 0,
            shopId: '',
            statistics: [],
            colors: ['#F8B551', '#89C997', ' #7ECEF4', '#BF9AD4', '#89B0E4', '#F29C9F', '#8AD6D3'],
            rgbas: ['248, 181, 81,.1', '137, 201, 151,.1', '126, 206, 244,.1', '191, 154, 212,.1', '137, 176, 228,.1', '242, 156, 159,.1', '138, 214, 211,.1'],

            // 好评榜单
            reviewsList: [],

            total: 0,

            // 美发师中差评统计 信息
            statisticsComments: [],

            cashierDatalist: '',
            data: 0,
            series: '',
            page: 0,
            havecoter: []
        };
    }
    /**
     * 页面的初始数据
     */,
    options: {
        styleIsolation: 'shared'
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getStoreScoreService();
        this.getStoreScoreStylistStatistics();
        this.getStoreScoreStatistics();
    },
    onShow() {
        // this.cashierData()
    },
    methods: {
        // 店铺中差评统计
        getStoreScoreStatistics() {
            _request
                .get('/storeManage/getStoreScoreStatistics', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    console.log(res.data.data);

                    if (res.data.code == 200) {
                        if (
                            res.data.data.fiveStar == 0 &&
                            res.data.data.fourStar == 0 &&
                            res.data.data.threeStar == 0 &&
                            res.data.data.twoStar == 0 &&
                            res.data.data.oneStar == 0
                        ) {
                            console.log(res.data.data);
                            this.setData({
                                cashierDatalist: res.data.data,
                                todayAmount: res.data.data.todayAmount,
                                'ringChart.series[0].data': 0,
                                'ringChart.series[1].data': 0,
                                'ringChart.series[2].data': 0,
                                'ringChart.series[3].data': 0,
                                'ringChart.series[4].data': 0,
                                series: this.ringChart.series,
                                bol: false
                            });
                            ringChart = new wxCharts(this.ringChart);
                            ringChart.addEventListener('renderComplete', () => {
                                console.log('renderComplete');
                            });
                        } else {
                            this.setData({
                                cashierDatalist: res.data.data,
                                todayAmount: res.data.data.todayAmount,
                                'ringChart.series[0].data': res.data.data.fiveStar,
                                'ringChart.series[1].data': res.data.data.fourStar,
                                'ringChart.series[2].data': res.data.data.threeStar,
                                'ringChart.series[3].data': res.data.data.twoStar,
                                'ringChart.series[4].data': res.data.data.oneStar,
                                bol: true
                            });
                        }

                        ringChart = new wxCharts(this.ringChart);
                        ringChart.addEventListener('renderComplete', () => {
                            console.log('renderComplete');
                        });
                        setTimeout(() => {
                            ringChart.stopAnimation();
                        }, 500);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 商品榜单好评信息
        getStoreScoreService() {
            _request
                .get('/storeManage/getStoreScoreService', {
                    storeId: uni.getStorageSync('storeId') // storeId : wx.getStorageSync('storeId')
                })
                .then((res) => {
                    console.log(res);

                    if (res.data.code == 200) {
                        this.reviewsList = res.data.data.lists.sort((a, b) => {
                            return b.num - a.num;
                        });
                        this.total = res.data.data.lists.reduce((sum, item, index) => {
                            return (sum += item.num);
                        }, 0);
                        this.setData({
                            reviewsList: this.reviewsList,
                            total: this.total
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 美发人员中差评统计筛选
        getStoreScoreStylistStatistics() {
            _request
                .get('/storeManage/getStoreScoreStylistStatistics', {
                    storeId: uni.getStorageSync('storeId'),
                    starLevel: this.active
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log(res.data.data.lists);
                        this.setData({
                            statisticsComments: res.data.data.lists
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        queryListByType(e) {
            let index = e.currentTarget.dataset.index;
            this.setData({
                active: index,
                page: 0
            });
            this.getStoreScoreStylistStatistics();
        },

        touchHandler: function (e) {
            console.log(ringChart.getCurrentDataIndex(e));
        },

        //测试用
        cashierData() {
            _request
                .get('/storeManage/getStoreScoreStatistics', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    console.log(res.data.data);

                    if (res.data.code == 200) {
                        if (
                            res.data.data.fiveStar == 0 &&
                            res.data.data.fourStar == 0 &&
                            res.data.data.threeStar == 0 &&
                            res.data.data.twoStar == 0 &&
                            res.data.data.oneStar == 0
                        ) {
                            this.ringChart.series = this.ringChart.series.map((item, index) => {
                                return (item.color = 'rgba(253, 241, 236, 1)');
                            });
                            this.setData({
                                cashierDatalist: res.data.data,
                                todayAmount: res.data.data.todayAmount,
                                'ringChart.series[0].data': 0,
                                'ringChart.series[1].data': 0,
                                'ringChart.series[2].data': 0,
                                'ringChart.series[3].data': 0,
                                'ringChart.series[4].data': 0,
                                series: this.ringChart.series
                            });
                            ringChart = new wxCharts(this.ringChart);
                            ringChart.addEventListener('renderComplete', () => {
                                console.log('renderComplete');
                            });
                        } else {
                            this.setData({
                                cashierDatalist: res.data.data,
                                todayAmount: res.data.data.todayAmount,
                                'ringChart.series[0].data': res.data.data.fiveStar,
                                'ringChart.series[1].data': res.data.data.fourStar,
                                'ringChart.series[2].data': res.data.data.threeStar,
                                'ringChart.series[3].data': res.data.data.twoStar,
                                'ringChart.series[4].data': res.data.data.oneStar
                            });
                        }

                        ringChart = new wxCharts(this.ringChart);
                        ringChart.addEventListener('renderComplete', () => {
                            console.log('renderComplete');
                        });
                        setTimeout(() => {
                            ringChart.stopAnimation();
                        }, 500);
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        havecoterFun() {
            console.log('占位：函数 havecoter 未声明');
        },

        hearname() {
            console.log('占位：函数 hearname 未声明');
        }
    }
};
</script>
<style>
/* pages/evaluationstatistics/index.wxss */
page {
    height: 100%;
}
.statistics-box {
    width: 100%;
    height: 500rpx;
    border-top: 20rpx solid #f1f1f1;
}
.statistics-title {
    padding: 0rpx 42rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    line-height: 100rpx;
}
.title-cl {
    width: 8rpx;
    height: 8rpx;
    background: #e94a18;
    border-radius: 50%;
    margin-right: 10rpx;
}
.title-cltext {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.cltext {
    color: #666666;
}
.wxcharts {
    width: 100%;
    height: 400rpx;
    display: flex;
    align-items: center;
    z-index: 999;
}
.wxcharts-default {
    position: relative;
    width: 460rpx;
    height: 460rpx;
    /* border: 1rpx solid red; */
}
.wxcharts-big {
    position: absolute;
    left: 31rpx;
    top: 41rpx;
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    background: #fdf1ecff;
    margin: 47rpx 0 0 31rpx;
}
.wxcharts-small {
    position: absolute;
    left: 85rpx;
    top: 90rpx;
    width: 195rpx;
    height: 195rpx;
    border-radius: 50%;
    background: #fff;
    margin: 47rpx 0 0 31rpx;
}
.data_info {
    /* border: 1rpx solid red; */
}
.data_item {
    display: flex;
    align-items: center;
    line-height: 80rpx;
}
/* 商品好评榜单 */
.ReviewsList {
    border-top: 20rpx solid #f1f1f1;
    margin-bottom: 20rpx;
}
.statistics-text {
    position: relative;
    display: flex;
    padding: 0rpx 40rpx;
    align-items: center;
    /* margin-bottom: 62rpx; */
    height: 80rpx;
    /* border: 1rpx solid red; */
}
.statistics-lt {
    position: absolute;
    width: 200rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    padding: 6rpx 0 6rpx 17rpx;
    /* background-color: rgba(248, 181, 81, 0.1); */
    /* background-color: red; */
    border-radius: 15rpx;
}
.statistics-texts {
    color: #dc8503;
    display: inline-block;
    /* border: 1rpx solid red; */
    width: 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.statistics-nums {
    position: absolute;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 30rpx;
}
.statistics-lt1 {
    width: 200rpx;
    padding-left: 17rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    /* background-color: rgba(248, 181, 81, 0.1); */
    color: #3ea354;
}
.statistics-lt2 {
    width: 200rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    background-color: rgba(248, 181, 81, 0.1);
    color: #20a6e6;
}

.con-pro {
    width: 500rpx;
    position: absolute;
    left: 200rpx;
    height: 44rpx;
}

.wx-progress-inner-bar {
    border-radius: 15px;
}
.data_item text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 15rpx;
}
.negative-comment {
    border-top: 20rpx solid #f1f1f1;
    margin-bottom: 100rpx;
}
.yesterday {
    width: 20rpx;
    height: 20rpx;
    background: #e94a18;
    border-radius: 50%;
}
.month {
    width: 20rpx;
    height: 20rpx;
    background: #f8b551;
    border-radius: 50%;
}
.all {
    width: 20rpx;
    height: 20rpx;
    background: #7ecef4;
    border-radius: 50%;
}
.all2 {
    width: 20rpx;
    height: 20rpx;
    background: #aa89bd;
    border-radius: 50%;
}
.all3 {
    width: 20rpx;
    height: 20rpx;
    background: #b3d465;
    border-radius: 50%;
}
.picker {
    z-index: 9999 !important;
}
.cur .picker {
    bottom: 0;
    z-index: 9999 !important;
}
.pic_box {
    width: 300rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.starbox {
}
.bg-ghostGrayS {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    padding-bottom: 30rpx;
}
.craftsmen-iconbox {
    width: 120rpx;
    position: relative;
}
.craftsmen-icon {
    border-radius: 50%;
    position: absolute;
    top: -80rpx;
    width: 100rpx;
    height: 99rpx;
    z-index: 9990;
    display: block;
    left: 11rpx;
}
.craftsmen-dif {
    padding: 0rpx 30rpx;
    margin-top: 100rpx;
    /* border: 1rpx solid red; */
}
.alternative-munber {
    text-align: center;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}
.alternative {
    text-align: center;
    padding-top: 25rpx;
    display: block;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}
.alternative-box {
    margin-top: 30rpx;
    width: 120rpx;
    height: 94rpx;
    background: #f1f1f1;
    border-radius: 10rpx;
}
.pay_icon_6 {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
}

.starbox-rl {
    display: flex;
    margin-top: 10rpx;
}
.pay_icon_6text1 {
    width: 30rpx;
    height: 30rpx;
    background: #ffffff;
    border: 1rpx solid #d2d2d2;
    border-radius: 50%;
    margin-right: 10rpx;
}
.pay_icon_6text2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.have-contentbox {
    display: flex;
    align-items: center;
    margin-right: 80rpx;
}
.pay_icon_6text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.have-contentboxcl {
    width: 36rpx;
    height: 36rpx;
    background: #e94a18;
    border-radius: 50%;
}

.van-tab {
    font-size: 26rpx !important;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333 !important;
}

.nav-class {
    width: 500rpx;
    margin-left: 20rpx;
    /* margin: 0 auto; */
}

.van-tab--active {
    font-weight: 500;
    font-weight: var(--font-weight-bold, 500);
    color: #e94a18 !important;
}

.van-tabs__line {
    background: #e94a18 !important;
}

.van-tab {
    height: 100%;
}

.shopbox {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    padding: 40rpx 20rpx 30rpx 20rpx;
    box-sizing: border-box;
}

.shopbox1 {
    width: 710rpx;
    height: 240rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    box-sizing: border-box;
}

.shopleft {
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.shopleft > view:nth-child(1) {
    margin: 0rpx 20rpx 20rpx 0rpx;
}

.shopleft > view:nth-child(2) {
    margin: 0rpx 0 20rpx 0;
}

.shopleft view:nth-child(1) view:nth-child(2) {
    margin: 0rpx 30rpx 20rpx 20rpx;
}
.text-df {
    padding: 12rpx 40rpx;
    background-color: rgba(153, 153, 153, 0.1);
    border-radius: 23rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}
.text-bold {
    padding: 12rpx 40rpx;
    background: #e94c19;
    border-radius: 30rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
}
.van-tabs__scroll--line {
    box-sizing: initial;
    height: 89rpx !important;
}
</style>
